<template>
  <view class="common">
    <view class="common-content">
      <view class="common-title">常用应用</view>
      <!--<u-line color="#F6F6F6"></u-line>-->
      <view class="common-list">
        <u-grid :col="4" :border="false">
          <u-grid-item  v-for="(item,index) in nav2" :key="index" >
            <view class="grid-item" @click="menuFun(item,index)">
              <image :src="item.image" class="grid-image"></image>
              <view class="grid-text">{{ item.name }}</view>
            </view>
          </u-grid-item>
        </u-grid>

      </view>
    </view>
  </view>
</template>
<script>
export default {
  name: "common-app",
  porps: {
    userphone: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      nav2: [
        /*{
          name: '活动管理',
          image: 'https://td.lszbg.com/public/uploads/code_shop/cede_shop_icon01.png',
          url: ''
        },*/
        {
          name: '已完成笔记',
          image: 'https://td.lszbg.com/public/uploads/code_shop/cede_shop_icon02.png',
          url: '/subPackagePurse/note-list/note-list'
        },
        /*{
          name: '待付账单',
          image: 'https://td.lszbg.com/public/uploads/code_shop/cede_shop_icon03.png',
          url: ''
        },*/
        {
          name: '我的钱包',
          image: 'https://td.lszbg.com/public/uploads/code_shop/cede_shop_icon04.png',
          url: '/subPackagePurse/pures/pures'
        },
        /*{
          name: '本地推广',
          image: 'https://td.lszbg.com/public/uploads/code_shop/cede_shop_icon05.png',

        },*/
        {
          name: '联系客服',
          image: 'https://td.lszbg.com/public/uploads/code_shop/cede_shop_icon06.png',
          url: ''
        },
        {
          name: '设置',
          image: 'https://td.lszbg.com/public/uploads/code_shop/cede_shop_icon07.png',
          url: '/subPackagePurse/account-settings/account-settings'
        }
      ]
    }
  },
  methods: {
    menuFun(item, index){
      let token = uni.getStorageSync('token')
      if (!token) {
        // #ifdef H5 || MP-WEIXIN
        uni.navigateTo({
          url: '/pages/login/login'
        })
        // #endif
      }else {
        if(item.name === '联系客服'){
          this.Tel()
        }else{
          uni.navigateTo({
            url: item.url
          })
        }
      }
    },
    //拨打电话
    Tel() {
      //console.log('拨打电话',uni.getStorageSync('userinfo').username)
      //获取本地缓存用户电话
      let reservePhone = uni.getStorageSync('userinfo').username
      if (!/^1\d{10}$/.test(reservePhone)) {
        uni.showModal({content: '没有绑定手机号，请先绑定手机号',showCancel: false})
        return
      }else{
        uni.makePhoneCall({
          phoneNumber: reservePhone, // 电话号码
          success: function () {
            console.log('拨打电话成功');
          },
          fail: function () {
            console.log('拨打电话失败');
          }
        });
      }
    },
    // 打开客服
    openService(){
      // #ifdef MP
      const data = uni.getStorageSync('customerServiceData')
      console.log('跳转到客服', data);
      wx.openCustomerServiceChat({
        //企业微信的企业id
        corpId:  data.app.corpId,
        extInfo: {
          //客服链接
          url: data.app.url
        },
        success(res) {
          console.log('跳转成功', res)
        },
        fail(res) {
          console.log('跳转失败', res)
        }
      })
      // #endif
    }
  }
}
</script>

<style scoped lang="scss">
  .common {
    padding: 30rpx;
    background-color: #ffffff;
    border-radius: 30rpx;
    .common-content {
      .common-title {
        font-size: 30rpx;
        font-weight: bold;
        color: #3D3D3D;
        padding: 10rpx;
      }
      .common-list {
        .grid-item {
          text-align: center;
          .grid-text {
            font-size: 26rpx;
            color: #3D3D3D;
            padding-top: 10rpx;
          }
          .grid-image {
            width: 78rpx;
            height: 78rpx;
          }
        }

      }
    }
  }
</style>